<template>
	 <div class="person_wapper"
	  v-loading="loading" 
    element-loading-text="拼命加载中">
	 	<form-panel  class='form_wappers' :formData = 'formdata' @do-search='handlerSearch'></form-panel>
		<div class="count">
	      <span>共搜索到<em>{{counts.all}}</em>条数据</span>
		    <!-- <el-button
		        plain
		        size='mini'
		        style="margin-left:8px;"
		      >导出Excel
	      </el-button> -->
	    </div>
	    <table-panel class='table_wappers' :labelList='labelList' :tableData='tableData' :control='false' @open-detail = 'openDetail'></table-panel>
			<div class="pagination">
				<el-pagination
					background
					layout="prev, pager,next, sizes,jumper"
					:page-sizes="[10, 20, 30]"
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:page-size="pageSize"
					:current-page='pages'
					:total="counts.all"
					v-if="(counts.all / pageSize) > 1">
				</el-pagination>
			</div>
    </div>
</template>

<script>
	import tablePanel from '@/components/common/table/table.vue'
	import formPanel from '@/components/common/form/formPanel.vue'
	import { searchAppCase , getWordCloud } from '../../api/api'
	export default{
		  components : {
		    tablePanel,
		    formPanel
		  },
		  data(){
		  	return {
					loading: false,
		  		counts : {
			        all : 0,
			    },
					pageSize : 10,
					pages : 1,
					paramData : {},
					formdata : [
						{
							label : '案件类型',
							code : 'ab',
							type : 'select',
							options : [
		            {
		              label : '谋杀',
		              code : 'mousha'
		            },
		            {
		              label : '抢劫',
		              code : 'qiangjie'
		            }
		          ],
							modelData : '',
						},
						{
							label : '作案工具',
							code : 'zagj',
							type : 'input',
							modelData : '',
						},
						{
							label : '手段特点',
							code : 'sdtd',
							type : 'input',
							modelData : '',
						},
						{
							label : '选择时机',
							code : 'xzsj',
							type : 'input',
							modelData : '',
						},
						{
							label : '选择部位',
							type : 'input',
							code : 'xzbw',
							modelData : '',
						},
						{
							label : '选择处所',
							type : 'input',
							code : 'xzcs',
							modelData : '',
						},
						{
							label : '选择对象',
							type : 'input',
							code : 'xzdx',
							modelData : '',
						},
						{
							label : '作案人数',
							code : 'zars',
							type : 'input',
							modelData : '',
						}
					],
			    //key带count和time的有排序功能
			    labelList : {
		         ajbh : '案件编号',
		         ajmc : '案件名称',
						 ab  : '案件类型',
		         fasjcz : '案发时间',
		         fadd_qx : '案发区域',
		         fadd : '案发详细地址',
			    },
			    tableData :[],
		  	}
			},
			created() {
				this.changeWord('AB','ab','案件类别',0);
				this.changeWord('ZAGJ','zagj','作案工具',1);
				this.changeWord('SDTD','sdtd','手段特点',2);
				this.changeWord('XZSJ','xzsj','选择时机',3);
				this.changeWord('XZBW','xzbw','选择部位',4);
				this.changeWord('XZCS','xzcs','选择处所',5);
				this.changeWord('XZDX','xzdx','选择对象',6);
			},
			methods: {
				handlerSearch(data) {
					this.loading = true;
					// 判断入参是否改变  从而判断是否重置分页   
					if(data){
						this.paramData = data;
						this.pages = 1;
						this.pageSize = 10;
					}
					searchAppCase(this.paramData , this.pages , this.pageSize).then((res)=>{
						this.loading = false;
						let resData;
						if(res.data.state === 'success'){
							resData = JSON.parse(res.data.result);
							this.tableData = resData.list;
							this.counts.all = resData.totalCount;
						}
					})
				},
				handleSizeChange(val){
					this.pageSize = val;
					this.pages = 1;
					this.handlerSearch()
				},
				handleCurrentChange(val) {
					this.pages = val
					this.handlerSearch()
				},
				openDetail(data){

				},
				// 获取字典
				changeWord(name,code,label,index){
					getWordCloud(name).then((res) => {
						let data = {
							label : label,
							type : 'select',
							code : code,
							options : [],
							modelData : '',
						};
						let _resdata = res.data;
						_resdata.forEach((elem) => {
							data.options.push({ label: elem.value , code: elem.key });
						});
						this.formdata.splice(index,1,data);
					})
				}
			}
	}
</script>

<style lang="scss" scoped>
.form_wappers,.count,.table_wappers {
  width: 80%;
  min-width: 1200px;
  margin: 0 auto;
}
.form_wappers {
  padding: 12px;
  background-color: #eee;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.count {
  margin: 12px auto;
  span {
    em {
      color: red;
    }
  }
}
.pagination {
  margin-left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  margin-top: 12px;
  margin-bottom: 20px;
}

</style>
